<template>
  <!--  This is the navBar of Admin Page-->
  <div class="navBar">
    <div class="nav">
      <div class="logo">LOGO  管理平台</div>
      <div class="loginBtn">
        <div v-if="isLogin">
          <el-button size="mini" type="primary" @click="exit">退出登录</el-button>
        </div>
        <div v-else>
          <el-dropdown>
            <el-button size="mini" type="primary" @click="login">
              登录
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="login">立即登录</el-dropdown-item>
                <el-dropdown-item @click="register">注册</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Admin_navBar",
  data() {
    return {
      isLogin: true,

    }
  },
  methods: {
    login() {

    },
    exit() {

    },
    register() {

    },

  }
}
</script>

<style scoped>
.navBar {
  margin: -8px;
  background-color: #2c3e50;
  color: #ffffff;
}

.nav {
  margin-top: 5px;
  height: 60px;
}

.logo {
  margin-left: 80px;
  margin-top: 20px;
  float: left;
}
.loginBtn {
  margin-top: 15px;
  float: right;
  width: 100px;
}
</style>